<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<link rel="stylesheet" type="text/css" href="css/new.css"/>
</head>
<body class="bd-bg">
<!--右侧主体-->
<div class="boiler-contentPart">
    <div class="boiler-main">
        <!--图表区域-->
        <div class="row rowNew">
            <div class="echart-item col-sm-12">
                <div id="main" style="width:100%;height:500px;"></div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<!--echart-->
<script src="js/echarts.min.js"></script>


<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var xData = ['0号温室', '1号温室', '2号温室', '3号温室', '4号温室', '5号温室', '6号温室', '7号温室', '8号温室', '9号温室', '10号温室', '11号温室', '12号温室', '13号温室', '14号温室', '0号温室', '0号温室', '0号温室']
    var yData = [32, 36, 27, 28, 22, 18,28,24,26,32,26,26,22,24,32, 36, 27, 26]
    var _title = '温室实时温度'
    // 指定图表的配置项和数据
    var option01 = {
        legend:{
            data:['温度(℃)'],
            right:'3%',
            selectedMode:false,
            textStyle:{
                fontSize:22,
                color:'#8f929f'
            }
        },
        title: {
            text: _title,
            x: 'center',
            textStyle:{
                fontSize:36,
                color:'#2d353e'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            textStyle:{
                fontSize:22
            }
        },
        grid:{
            top:'18%',
            bottom:'7%',
            left:'4.2%',
            right:'7%'
        },
        xAxis: {
            name:'温室\n编号',
            nameTextStyle:{
                color: '#a1a4a8',
                fontSize: 20,
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#f3f6fa'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#a3abb4',
                    fontSize: 20,
                }
            },
            data: xData
        },
        yAxis: {
            name: '℃',
            nameTextStyle:{
                color: '#a1a4a8',
                fontSize: 20,
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#f3f6fa'
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#f3f6fa'
                }
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#a3abb4',
                    fontSize: 20,
                }
            }
        },
        series: {
            name:'温度(℃)',
            type: 'bar',
            barWidth: 28,
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#a63f13' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#879006' // 100% 处的颜色
                    }], false)
                }
            },
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#de5316' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#c5d108' // 100% 处的颜色
                    }], false)
                }
            },
            label: {
                normal: {
                    show: true,
                    width: 100,
                    lineHeight: 30,
                    height: 30,
                    position: ['-40', '-40'],
                    distance: 1,
                    formatter: [
                        ' {a|{c}}'
                    ].join(','),
                    rich: {
                        a: {
                            fontSize:24,
                            color:'#04e20e',
                            align: 'center',
                        }
                    }
                }
            },
            data:yData
        }
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option01);

</script>
</body>
</html>
